<template>
	<view class="inner-section">
		<view class="common-normal-box patch-one">
			<view class="normal-tag-top">
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">班级全体成员信息</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
			
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
							:duration="500">
				<swiper-item v-for="(item,pageIndex) in studentList" :key="pageIndex">
				
					<view class="student-list">
						
						 <template v-for="(option,index) in item.datas" >
							 <view class="one-col" :key="index">
								 <view class="avatar-img">
								 	<image :src="option.avatar?option.avatar:baseImgURL+'/icon_person.png'" mode="widthFix"></image>
								 </view>
							 	<text>{{option.pName}}</text>
							 </view>
						 </template>
					 </view>
				</swiper-item>
			</swiper>
			
		</view>
		<view class="common-normal-box patch-two">
			<view class="normal-tag-top">
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">班级教师</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
			
			<!-- <view class="sub-title">
				班级教师
			</view> -->
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
						:duration="500">
			<swiper-item v-for="(item,pageIndex) in teacherList" :key="pageIndex">
			
				<view class="teacher-list">
					
					 <template v-for="(option,index) in item.datas" >
						 <view class="one-col" :key="index" @click="showModal(option)">
							  <text class="subject" > <text v-if="option.subject">{{option.subject}}</text> 老师</text>
						 	<image :src="option.url?option.url:baseImgURL+'/introduce/teacher.png'" mode="widthFix"></image>
						 	<text>{{option.pName}}</text>
						 </view>
					 </template>
				 </view>
			</swiper-item>
		</swiper>
		</view>
		<view class="common-normal-box  patch-three">
			<view class="normal-tag-top">
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">班级展示</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="9000"
							:duration="500">
				<swiper-item v-for="(item,pageIndex) in albumPhotoList" :key="pageIndex">
				
					<view class="photo-list">
						
						 <template v-for="(option,index) in item.datas" >
							 <view class="one-col" :key="index" v-if="option.rolePhotoAlbumEntities" @click='lookPhotos(option)'>
								<text class="subject" > {{option.name}}</text>
							 	<image class="img-kk" :src="option.rolePhotoAlbumEntities[0].url" mode="aspectFill"></image>
							 	
							 </view>
						 </template>
					 </view>
				</swiper-item>
			</swiper>
		</view>
		<PopWindow :title="albumTitle" :visible.sync="isVisible"  width="390.63rpx" height="273.44rpx">
			 <template v-slot:content>
				<swiper class="swiper-class" circular :indicator-dots="true" :autoplay="true" :interval="3000"
								:duration="500">
					<swiper-item v-for="(item,pageIndex) in curPhotoList" :key="pageIndex">
					
						<view class="photo-box">
							 <image class="img-kk" :src="item.url" mode="aspectFill"></image>
						 </view>
					</swiper-item>
				</swiper>
			</template>
		</PopWindow>
		
		
		<PopWindow  :visible.sync="isVisibleTeach"  width="603rpx" height="335rpx">
			 <template v-slot:content>
				 
				 <view class="teancher-box">
				 	 <image :src="curTeacher.url" mode="widthFix"></image>
					 <view class="info-detail">
					 	 <text class="title">{{ curTeacher.pName }}-高级教师</text>
						
						<view v-if="curTeacher.comment" class="inner-one">
							 <text class="stitle">个人特点</text>
							{{ curTeacher.comment }}
						 </view> 
						<view v-if="curTeacher.teaching" class="inner-one">
						<text class="stitle">救学理念</text>
						{{ curTeacher.teaching }}
						 </view> 
						<view v-if="curTeacher.work" class="inner-one">
						<text class="stitle">工作经验</text>
						{{curTeacher.work}} </view> 
						<view v-if="curTeacher.honorary" class="inner-one">
						<text class="stitle">荣誉成就</text>
						{{ curTeacher.honorary }}
						</view>
					 </view>
				 </view>
			 </template>
			
		</PopWindow>
		
		
	</view>
</template>

<script>
	import { fetchData } from '../../utils/request'
	import PopWindow from '../PopWindow/PopWindow.vue';
	import  {mapState} from 'vuex'
	export default {
		name:'ClassPage',
		data() {
			return {
				studentList:[],
				teacherList:[],
				albumPhotoList:[],
				albumTitle:'',
				curPhotoList:[],
				isVisible:false,
				isVisibleTeach:false,
				curTeacher:{}
			};
		},
		components:{
			PopWindow
		},
		computed:{
			...mapState(['classId','baseImgURL','schoolId'])
		},
		methods:{
			showModal(item){
				this.isVisibleTeach = true;
				this.curTeacher = item;
			},
			//获取所有学生
			async getAllStudents(){
				let res = await fetchData({
				        url:'/database/person/info/student/list',
				        method:'GET'
				 })
				 if(res.code==200){
					 let pageSize = 14;
					 let alldata = res.rows;
					 let totalPage = Math.ceil(alldata.length/pageSize);
					 
					 for(let i=0;i<totalPage;i++) {
						 let datas = alldata.slice(i*pageSize,(i+1)*pageSize);
						 this.studentList.push({
							 pageIndex:i+1,
							 datas:datas
						 })
					 }
				 }
			},
			// 获取所有老师
			async getAllTeacher(){
				let res = await fetchData({
				        url:'/database/person/info/teacherCharmList',
				        method:'GET'
				 })
				 if(res.code==200){
					let pageSize = 3; // 每页显示的数据
					let alldata = res.rows;
					let totalPage = Math.ceil(alldata.length/pageSize);
					
					for(let i=0;i<totalPage;i++) {
						 let datas = alldata.slice(i*pageSize,(i+1)*pageSize);
						 this.teacherList.push({
							 pageIndex:i+1,
							 datas:datas
						 })
					}
					 
				 }
			},
			
			 // 获取相册
			 async getAlbumPhoto(){
			 	let res = await fetchData({
			 	        url:'/database/school/api/selectfeaAlbumSchoolphoto',
			 	        method:'POST',
						data:{  // 校园相册
							// schoolId:this.schoolId,
							type:'班级相册'
						  }
			 	 })
			 	 if(res.code==200){
			 		let pageSize = 3; // 每页显示的数据
			 		let alldata = res.data;
			 		let totalPage = Math.ceil(alldata.length/pageSize);
			 		
			 		for(let i=0;i<totalPage;i++) {
						
			 			 let datas = alldata.slice(i*pageSize,(i+1)*pageSize);
			 			 this.albumPhotoList.push({
			 				 pageIndex:i+1,
			 				 datas:datas
			 			 })
			 		}
			 		 
			 	 }
			 },
			lookPhotos(item){
				this.isVisible = true;
				this.albumTitle = item.name;
				this.curPhotoList = item.rolePhotoAlbumEntities;
			}
				
		},
		mounted(){
			this.getAllStudents();
			this.getAllTeacher();
			this.getAlbumPhoto();
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height:90%;
	}
	.swiper-class {
		height:100%;
	}
.patch-one {
	width: 311.72upx;
	// background: url($imageurl+'/bg_class.png') center top no-repeat;
	// background-size:100%;

}
.patch-two {
	// width:390.63upx;
	// height:273.44upx;
	
	width: 275upx;
	// background: url($imageurl+'/bg_teacher.png') center top no-repeat;
	// background-size:100%;
}
.patch-three {
	width: 100%;
	background: url($imageurl+'/bg_class2.png') center top no-repeat;
	background-size:100%;
}
.student-list,.teacher-list {
	display: flex;
	justify-content:flex-start;
	margin-top: 8upx;
	flex-wrap: wrap;
	.one-col {
		font-size: 7.81upx;
		color: #333;;
		line-height: 19.53upx;
		width: 14.28%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 15upx;
		.avatar-img{
			width: 25.78upx;
			height:25.78upx;
				image {
					border-radius: 50%;
					height:100%!important;
				}
		}
		
	}
}
.teacher-list {
	.one-col { 
		width: 33.3%;
		position: relative;
		image {
			width: 67.19upx;
			height: 89.84upx;
		}
		.subject {
			position: absolute;
			right: 3.91upx;
			top:3.91upx;
			width: 39.06upx;
			height:15.23upx;
			line-height: 15.23upx;
			background:url($imageurl+'/tag_teacher.png') left top no-repeat;
			background-size: 100%;
			z-index: 10;
			color: #fff;
			text-align: center;
			font-size: 6.25upx;
		}
	}
}
.photo-list {
	display: flex;
	justify-content:space-between;
	margin-top: 8upx;
	flex-wrap: wrap;
	.one-col {
		width: 32%;
		position: relative;
		.img-kk {
			width: 186.72upx;
			height:131.25upx;
			border-radius: 3.91upx;
		}
	}
	.subject {
		position: absolute;
		left: 0;
		top:0;
		width: 91.41upx;
		height:17.97upx;
		line-height: 17.97upx;
		background:url($imageurl+'/title_bg.png') left top no-repeat;
		background-size: 100%;
		z-index: 10;
		color: #fff;
		text-align: left;
		padding-left: 6.91upx;
		font-size: 8.59upx;
	}
	
}
.photo-box {
	width: 100%;
	height: 100%;
	margin-top: 19.53upx;
	image {
		 border-radius: 3.91upx;
	}
}
</style>
